<script lang="ts" setup>
import type {
  IChartingLibraryWidget,
  ThemeName,
  ResolutionString,
  ChartingLibraryWidgetOptions,
  TradingTerminalWidgetOptions,
} from "./lib/charting_library/charting_library.min";
import { UDFCompatibleDatafeed } from "./lib/datafeeds/udf/src/udf-compatible-datafeed";
import { Datafeed, Options, ThemeCfg } from "./index";
import useUserinfoStore from "@@/store/useUserinfoStore";
import { generateUUID } from "@@/utils/tools/generate";
import useSysStore from "@@/store/useSysStore";

const chartId = `kLine-${generateUUID()}`;

const props = withDefaults(
  defineProps<{
    datafeed?: Datafeed;
    theme?: ThemeName;
    options?: Options;
    height?: string;
    symbol: string;
    /**支持的周期数组，周期可以是数字或字符串。 如果周期是一个数字，它被视为分钟数。 字符串可以是“*D”，“*W”，“_M”（_的意思是任何数字） */
    interval?: ResolutionString;
  }>(),
  {
    theme: "Dark",
    options: () => ({}),
    height: "800rem",
  }
);

const themeEnum: {
  [k in ThemeName]: ThemeCfg;
} = {
  Light: {
    bg: "#fff",
    color: "#333",
    borderColor: "#00000011",
  },
  Dark: {
    bg: "#1e1e1e",
    color: "#aaa",
    borderColor: "#ffffff11",
  },
};

const userinfoStore = useUserinfoStore();
const sysStore = useSysStore();
const { setting } = storeToRefs(sysStore);

const chart = ref<IChartingLibraryWidget>();
defineExpose({ chart });

const languageEnum = {
  "zh-CN": "zh",
  "zh-TW": "zh_TW",
  "en-US": "en",
};
onMounted(() => {
  chart.value = new window.TradingView.widget(getChartOption());
  watch(
    () => setting.value.language,
    (newVlaue, oldValue) => {
      if (newVlaue === oldValue) return;
      chart.value?.setLanguage(
        languageEnum[newVlaue as keyof typeof languageEnum] as any
      );
    },
    {
      deep: true,
    }
  );
});
function getChartOption():
  | ChartingLibraryWidgetOptions
  | TradingTerminalWidgetOptions {
  const chartDom: HTMLDivElement = document.getElementById(chartId) as any;
  const language = setting.value.language as keyof typeof languageEnum;
  const themeCfg = themeEnum[props.theme];
  return {
    symbol_search_request_delay: 1000,
    timezone: "Asia/Shanghai", // 时区
    width: chartDom.clientWidth,
    height: chartDom.clientHeight,
    autosize: true,
    symbol: props.symbol,
    /**支持的周期数组，周期可以是数字或字符串。 如果周期是一个数字，它被视为分钟数。 字符串可以是 S D W M（_的意思是任何数字） */
    interval: props.interval || "15",
    toolbar_bg: themeCfg.bg,
    datafeed:
      props.datafeed ||
      new UDFCompatibleDatafeed("http://demo_feed.tradingview.com"),
    library_path: "/charting_library/",
    locale: (languageEnum[language] || "en") as any,
    charts_storage_url: "http://saveload.tradingview.com",
    client_id: "tradingview.com",
    user_id: userinfoStore.lastLoginInfo?.accounts,
    theme: props.theme,
    drawings_access: {
      type: "black", //black(所有列出的项目会被禁用),white(只有列出的项目会被启用)。
      tools: [/*{ name: "Regression Trend" } */],
    },
    time_frames: [
      { text: "50y", resolution: "6M", description: "50 Years" },
      { text: "3y", resolution: "W", description: "3 Years" },
      { text: "8m", resolution: "D", description: "8 Month" },
      { text: "3d", resolution: "5", description: "3 Days" },
      { text: "1000y", resolution: "W", description: "All", title: "All" },
    ],
    preset: "mobile",
    /**启用的功能 */
    enabled_features: [
      "side_toolbar_in_fullscreen_mode", //全屏模式启动绘图功能
      //https://zlq4863947.gitbook.io/tradingview/4-tu-biao-ding-zhi/featuresets
      //https://tradingview.gitee.io/featuresets/
      "left_toolbar", //左侧工具栏
      // "header_symbol_search", //顶部搜索框
      // "compare_symbol", //在图表上添加比较证券
      // "volume_force_overlay", //将成交量指标强制覆盖在主图上。
      "symbol_info", //商品信息对话框。这个控件位于图表的左上角
      "go_to_date", //快速跳转到指定的日期。这个控件位于图表的左上角
      // "symbol_search_hot_key", //用于设置在图表上使用快捷键打开“搜索证券”框
      "timeframes_toolbar", //图表下方的一个工具栏，用于选择和切换不同的时间周期。这个工具栏包含了各种不同的时间周期，如1分钟、5分钟、1小时、日线等
      "edit_buttons_in_legend", //是否在图例中显示编辑按钮
      "legend_widget", //用于显示图表中各种指标和线条的说明和标签。这个控件位于图表的右上角，可以通过单击控件上的图例按钮来打开和关闭。当打开图例时，用户可以看到每个指标或线条的名称和颜色，并可以通过单击名称来切换它们的显示状态。这个控件非常有用，因为它可以帮助用户更好地理解图表中各种指标和线条的含义，并更好地分析价格趋势。
      "main_series_scale_menu", //用于设置主图的价格缩放类型。主图价格缩放类型有两种：常规缩放和对数缩放。常规缩放将价格刻度线分为等距离的间隔，而对数缩放将价格刻度线分为对数间隔。main_series_scale_menu控件位于图表的左上角，可以通过单击控件上的下拉箭头来打开菜单并选择所需的价格缩放类型。这个控件非常有用，因为它可以帮助用户更好地分析价格变动，并更好地理解价格趋势。
      "show_right_widgets_panel_by_default", //是否默认显示右侧的小部件面板
      "right_toolbar", //右侧的一个工具栏，提供了一系列常用的工具和功能，如添加指标、添加图形、添加文本注释、保存图表等
      "remove_library_container_border", //是否移除库容器的边框
      // "hide_last_na_study_output", //用于控制是否隐藏最后一个缺失值的指标或策略的输出
      "dont_show_boolean_study_arguments", //控制在图表上显示或隐藏布尔类型的指标或策略的参数
      "save_chart_properties_to_local_storage", //将用户的图表设置和属性保存在浏览器的本地存储中。下次用户打开该图表时，这些设置将自动应用
      "control_bar", //一个控件条，位于图表的顶部，提供了许多常用的控件和工具，如时间分辨率选择器、图表类型选择器、指标和策略选择器、图表缩放工具等。
      "context_menus", //是指当用户右键单击图表或其他元素时出现的上下文菜单。这些菜单包含了一些常用的选项，如添加指标、添加注释、放大/缩小图表等
      "study_buttons_in_legend", //图例控件
      "header_saveload", //保存图片
      "header_widget", //头部整体开关
      "header_widget_dom_node", //头部小部件 DOM 元素
      // "header_compare", //(对比)允许用户将一个或多个证券或指标与当前图表上的证券或指标进行比较
      "header_resolutions", //显示时间分辨率选项，例如“1分钟”，“5分钟”
      // "symbol_search_hot_key", //按任意键进行商品搜索
      "header_settings", //头部设置
      // "legend_context_menu",//用户可以在图例上单击右键，打开上下文菜单，并在其中选择不同的操作，如添加指标、删除指标、编辑指标等
      // "hide_left_toolbar_by_default",//默认隐藏工具栏
      // "border_around_the_chart", //图表周围的边框
      // "chart_crosshair_menu",//启用价格刻度上的“加号”按钮以进行快速交易
      // "property_pages",//禁用所有属性页
      // "show_chart_property_page",//关闭此功能会禁用属性
      // "chart_property_page_right_margin_editor",//在设置对话框中显示右边距编辑器
      // "chart_property_page_trading",//此功能仅适用于交易终端
      // "countdown",//在价格标尺上显示倒计时标签
      // "caption_buttons_text_if_possible",//尽可能在标题和比较按钮上显示文本而不是图标
      // "dont_show_boolean_study_arguments",//隐藏 true/false 指标参数
      // "hide_last_na_study_output",//隐藏最后的 n/a 指标输出数据
      // "timezone_menu",//禁用时区上下文菜单
      // "snapshot_trading_drawings", //在截图中包括订单/头寸/成交
      // "source_selection_markers", //禁用数据列和指标的选择标记
      // "go_to_date", //允许您使用转到对话框跳转到特定栏
      // "adaptive_logo", //允许您在小屏幕设备上隐藏 logo 的TradingView文字
      // "show_dom_first_time", //当用户第一次打开图表时显示 DOM 面板
      // "hide_left_toolbar_by_default", //当用户第一次打开图表时，隐藏左侧工具栏
      // "chart_style_hilo", //在图表样式控件中添加 Hi-Lo 选项
      // "pricescale_currency", //在价格轴上显示交易工具所用的货币
      // "pricescale_unit", //在价格轴上显示交易工具的单位
      // "scales_date_format", //在图表设置中显示日期格式选择器
      // "popup_hints", //显示有关可能的鼠标/快捷键/ UI操作的弹出提示
      // "save_shortcut", //启用保存快捷方式
      // "show_object_tree", //根据产品和配置在左侧或右侧面板中显示对象树按钮
      // "show_spread_operators", //在商品搜索对话框中显示价差运算符
      // "hide_exponentiation_spread_operator", //在商品搜索对话框中隐藏指数展开运算符 (^)
      // "hide_reciprocal_spread_operator", //在商品搜索对话框中隐藏倒数展开运算符 (1/x)
      // "compare_symbol_search_spread_operators", //在“比较搜索”对话框中显示价差运算符 - 需要结合使用show_spread_operators才能显示
      // "studies_symbol_search_spread_operators", //显示指标的点差运算符 - 需要结合使用show_spread_operators才能显示
      // "hide_resolution_in_legend", //在图表图例和数据窗口中隐藏周期（D、2D、W、M 等）
      // "hide_unresolved_symbols_in_legend", //在图表图例和数据窗口中隐藏未解析的商品
      //*元素放置
      "move_logo_to_main_pane", //将 logo 放在主数据列窗格上而不是底部窗格
      //*特性
      "use_localstorage_for_settings", //允许将所有属性（包括收藏夹）存储到 localstorage
      // "items_favoriting", //禁用此功能会隐藏所有“收藏此项目”按钮
      // "save_chart_properties_to_local_storage", //可以禁用以禁止将图表属性存储到 localstorage，同时允许保存其他属性。 其他属性是收藏在图表库和 Watchlist 的商品，以及交易终端中的一些面板状态。
      // "volume_force_overlay", //在主数据量列的窗格上放置成交量指标
      // "right_bar_stays_on_scroll", //确定缩放功能的特性：如果禁用此功能，鼠标光标下的 K 线将保持在同一位置
      // "constraint_dialogs_movement", //将对话框保留在图表中
      // "charting_library_debug_mode", //启用日志
      // "study_market_minimized", //与“指标”对话框相关，并确定它是否紧凑或包含搜索栏以及类别
      // "study_dialog_search_control", //在指标对话框中显示搜索控件
      // "side_toolbar_in_fullscreen_mode", //全屏模式启动绘图功能
      // "header_in_fullscreen_mode", //在全屏模式下启用标题小部件DOM元素
      // "disable_resolution_rebuild", //显示完全由 datafeed 提供的 K 线时间而不进行任何调整。
      // "chart_scroll", //允许图表滚动
      // "chart_zoom", //允许图表缩放
      // "horz_touch_drag_scroll", //如果启用，图表将处理触摸屏上的水平指针移动。在这种情况下，网页不会滚动。如果禁用，则改为滚动网页。请记住，如果用户开始垂直或水平滚动图表，则在用户松开手指之前，滚动将继续沿任何方向进行。
      // "vert_touch_drag_scroll", //如果启用，图表将处理触摸屏上的垂直指针移动。在这种情况下，网页不会滚动。如果禁用，则改为滚动网页。请记住，如果用户开始垂直或水平滚动图表，则在用户松开手指之前，滚动将继续沿任何方向进行
      // "mouse_wheel_scroll", //如果启用，则启用带水平鼠标滚轮的图表滚动。
      // "pressed_mouse_move_scroll", //如果启用，则允许在按下鼠标左键的情况下滚动图表。
      // "mouse_wheel_scale", //如果启用，则启用使用鼠标滚轮的比例缩放。
      // "pinch_scale", //如果启用，则启用捏/缩放手势的系列缩放（此选项在触摸设备上受支持）。。
      // "axis_pressed_mouse_move_scale", //如果启用，则允许按鼠标左键缩放轴。
      // "high_density_bars", //允许缩小以在单个屏幕上显示超过 60000 根 K 线
      // "low_density_bars", //允许放大以在视口中最多显示1 根 K 线
      // "uppercase_instrument_names", //禁用此功能允许用户输入区分大小写的商品
      // "no_min_chart_width", //禁用最小图表宽度限制
      // "fix_left_edge", //阻止滚动到第一个历史 K 线的左侧
      "lock_visible_time_range_on_resize", //防止在图表调整大小时更改可见时区
      // "shift_visible_range_on_new_bar", //如果禁用，则添加新的K线会缩小图表并保留第一个可见点。 否则，当出现新K线时，图表将向左滚动一点。
      // "custom_resolutions", //如果启用，则可以添加自定义分辨率
      // "end_of_period_timescale_marks", //切换时间线标记以显示K线的结束时间
      // "cropped_tick_marks", //如果禁用，则价格轴上部分可见的价格标签将被隐藏
      // "study_overlay_compare_legend_option", //将商品显示模式 (ticker/description) 应用于覆盖/比较状态行中的指标
      // "study_symbol_ticker_description", //将商品显示模式 (ticker/description) 应用于状态行中的指标输入
      // "auto_enable_symbol_labels", //比较商品时显示商品名称标签
      // "insert_indicator_dialog_shortcut", //启用插入指示器对话框快捷方式 (/)

      //*重要功能
      // "study_templates",
      // "datasource_copypaste", //允许复制绘图和指标
      // "seconds_resolution", //支持秒的周期
      // "tick_resolution", //启用对tick分辨率的支持
      "secondary_series_extend_time_scale", //启用此项功能以允许附加系列扩展时间范围
    ],
    /**禁用的功能 */
    disabled_features: [
      "header_compare", //(对比)允许用户将一个或多个证券或指标与当前图表上的证券或指标进行比较
      "study_dialog_search_control", //在指标对话框中显示搜索控件
      "header_symbol_search", //顶部搜索框
      "compare_symbol", //在图表上添加比较证券
      "symbol_search_hot_key", //按任意键进行商品搜索
      "border_around_the_chart", //图表周围的边框
    ],
    // //样式覆盖
    // studies_overrides: {
    //     "volume.volume.color.0": "#fe4761",
    //     "volume.volume.color.1": "#3fcfb4",
    //     "volume.volume.transparency": 75,
    // },
    //样式覆盖
    overrides: {
      "symbolWatermarkProperties.color": themeCfg.bg,
      volumePaneSize: "tiny",
      "paneProperties.background": themeCfg.bg,
      "paneProperties.vertGridProperties.color": themeCfg.borderColor,
      "paneProperties.horzGridProperties.color": themeCfg.borderColor,
      "scalesProperties.textColor": themeCfg.color,
      "bollinger bands.median.color": themeCfg.bg,
      "bollinger bands.upper.linewidth": 7,
      toolbar_bg: themeCfg.bg,

      // // 支持的值: large, medium, small, tiny

      // // 在文本编辑器中可用的字体（即，在`文本`绘图工具属性对话框中）
      // // editorFontsList:'Verdana'// ["Verdana", "Courier New", "Times New Roman", "Arial"],

      // "paneProperties.backgroundType": "solid", // or 'gradient'
      // "paneProperties.backgroundGradientStartColor": "#ffffff",
      // "paneProperties.backgroundGradientEndColor": "#ffffff",
      // "paneProperties.vertGridProperties.style": LINESTYLE_SOLID,
      // "paneProperties.horzGridProperties.style": LINESTYLE_SOLID,
      // "paneProperties.crossHairProperties.color": "#989898",
      // "paneProperties.crossHairProperties.width": 1,
      // "paneProperties.crossHairProperties.style": LINESTYLE_DASHED,

      // // 边际（百分比）。 用于自动缩放。
      // "paneProperties.topMargin": 5,
      // "paneProperties.bottomMargin": 5,

      // "paneProperties.axisProperties.autoScale": true,
      // "paneProperties.axisProperties.lockScale": false,
      // "paneProperties.axisProperties.percentage": false,
      // "paneProperties.axisProperties.indexedTo100": false,
      // "paneProperties.axisProperties.log": false,
      // "paneProperties.axisProperties.alignLabels": true,
      // "paneProperties.axisProperties.isInverted": false,

      // "paneProperties.legendProperties.showStudyArguments": true,
      // "paneProperties.legendProperties.showStudyTitles": true,
      // "paneProperties.legendProperties.showStudyValues": true,
      // "paneProperties.legendProperties.showSeriesTitle": true,
      // "paneProperties.legendProperties.showSeriesOHLC": true,
      // "paneProperties.legendProperties.showLegend": true,
      // "paneProperties.legendProperties.showBarChange": true,
      // "paneProperties.legendProperties.showOnlyPriceSource": true,

      // "scalesProperties.backgroundColor ": "#ffffff",
      // "scalesProperties.fontSize": 11,
      // "scalesProperties.lineColor ": "#555",
      // "scalesProperties.textColor ": "#555",
      // "scalesProperties.scaleSeriesOnly ": false,
      // "scalesProperties.showSeriesLastValue": true,
      // "scalesProperties.showSeriesPrevCloseValue": false,
      // "scalesProperties.showStudyLastValue": false,
      // "scalesProperties.showStudyPlotLabels": false,
      // "scalesProperties.showSymbolLabels": false,
      // "scalesProperties.showCurrency": true,
      // "scalesProperties.showUnit": true,

      // "timeScale.rightOffset": 5,

      // timezone: "Etc/UTC", //查看支持的时区列表（在Symbology页面中的timezone）的可用值

      // // 数据列风格。 请参阅下面的支持的值
      // //  Bars = 0            #美国线
      // //  Candles = 1         #K线图
      // //  Line = 2            #线形图
      // //  Area = 3            #面积图
      // //  Heiken Ashi = 8     #平均K线图
      // //  Hollow Candles = 9  #空心K线图
      // //  Renko = 4           #转形图
      // //  Kagi = 5            #卡吉图
      // //  Point&Figure = 6    #点数图
      // //  Line Break = 7      #新价图
      // "mainSeriesProperties.style": 1,

      // "mainSeriesProperties.showCountdown": true,
      // "mainSeriesProperties.visible": true,
      // "mainSeriesProperties.showPriceLine": true,
      // "mainSeriesProperties.priceLineWidth": 1,
      // "mainSeriesProperties.priceLineColor": "",
      // "mainSeriesProperties.showPrevClosePriceLine": false,
      // "mainSeriesProperties.prevClosePriceLineWidth": 1,
      // "mainSeriesProperties.prevClosePriceLineColor": "rgba( 85, 85, 85, 1)",
      // "mainSeriesProperties.lockScale": false,
      // "mainSeriesProperties.minTick": "default",

      // "mainSeriesProperties.priceAxisProperties.autoScale": true, //     (see #749)
      // "mainSeriesProperties.priceAxisProperties.autoScaleDisabled": false, //(see #749)
      // "mainSeriesProperties.priceAxisProperties.percentage": false,
      // "mainSeriesProperties.priceAxisProperties.percentageDisabled": false,
      // "mainSeriesProperties.priceAxisProperties.log": false,
      // "mainSeriesProperties.priceAxisProperties.logDisabled": false,

      // // 可能的值包括": description, ticker, ticker-and-description,
      // "mainSeriesProperties.statusViewStyle.symbolTextSource": "description",

      // "symbolWatermarkProperties.color ": "rgba(0, 0, 0, 0.00)",

      // // 不同的图表类型默认值

      // // K线图样式
      // "mainSeriesProperties.candleStyle.upColor": "#6ba583",
      // "mainSeriesProperties.candleStyle.downColor": "#d75442",
      // "mainSeriesProperties.candleStyle.drawWick": true,
      // "mainSeriesProperties.candleStyle.drawBorder": true,
      // "mainSeriesProperties.candleStyle.borderColor": "#378658",
      // "mainSeriesProperties.candleStyle.borderUpColor": "#225437",
      // "mainSeriesProperties.candleStyle.borderDownColor": "#5b1a13",
      // "mainSeriesProperties.candleStyle.wickUpColor": "rgba( 115, 115, 117, 1)",
      // "mainSeriesProperties.candleStyle.wickDownColor":
      //   "rgba( 115, 115, 117, 1)",
      // "mainSeriesProperties.candleStyle.barColorsOnPrevClose": false,

      // // 空心K线图样式
      // "mainSeriesProperties.hollowCandleStyle.upColor": "#6ba583",
      // "mainSeriesProperties.hollowCandleStyle.downColor": "#d75442",
      // "mainSeriesProperties.hollowCandleStyle.drawWick": true,
      // "mainSeriesProperties.hollowCandleStyle.drawBorder": true,
      // "mainSeriesProperties.hollowCandleStyle.borderColor": "#378658",
      // "mainSeriesProperties.hollowCandleStyle.borderUpColor": "#225437",
      // "mainSeriesProperties.hollowCandleStyle.borderDownColor": "#5b1a13",
      // "mainSeriesProperties.hollowCandleStyle.wickColor": "#737375",

      // // 平均K线图样式
      // "mainSeriesProperties.haStyle.upColor": "#6ba583",
      // "mainSeriesProperties.haStyle.downColor": "#d75442",
      // "mainSeriesProperties.haStyle.drawWick": true,
      // "mainSeriesProperties.haStyle.drawBorder": true,
      // "mainSeriesProperties.haStyle.borderColor": "#378658",
      // "mainSeriesProperties.haStyle.borderUpColor": "#225437",
      // "mainSeriesProperties.haStyle.borderDownColor": "#5b1a13",
      // "mainSeriesProperties.haStyle.wickColor": "#737375",
      // "mainSeriesProperties.haStyle.barColorsOnPrevClose": false,

      // // 美国线样式
      // "mainSeriesProperties.barStyle.upColor": "#6ba583",
      // "mainSeriesProperties.barStyle.downColor": "#d75442",
      // "mainSeriesProperties.barStyle.barColorsOnPrevClose": false,
      // "mainSeriesProperties.barStyle.dontDrawOpen": false,

      // // 线形图样式
      // "mainSeriesProperties.lineStyle.color": "#2962FF",
      // "mainSeriesProperties.lineStyle.linestyle": LINESTYLE_SOLID,
      // "mainSeriesProperties.lineStyle.linewidth": 1,
      // "mainSeriesProperties.lineStyle.priceSource": "close",

      // // 面积图样式
      // "mainSeriesProperties.areaStyle.color1": "#606090",
      // "mainSeriesProperties.areaStyle.color2": "#2962FF",
      // "mainSeriesProperties.areaStyle.linecolor": "#2962FF",
      // "mainSeriesProperties.areaStyle.linestyle": LINESTYLE_SOLID,
      // "mainSeriesProperties.areaStyle.linewidth": 1,
      // "mainSeriesProperties.areaStyle.priceSource": "close",

      // // 基准线样式
      // "mainSeriesProperties.baselineStyle.baselineColor":
      //   "rgba( 117, 134, 150, 1)",
      // "mainSeriesProperties.baselineStyle.topFillColor1":
      //   "rgba( 83, 185, 135, 0.1)",
      // "mainSeriesProperties.baselineStyle.topFillColor2":
      //   "rgba( 83, 185, 135, 0.1)",
      // "mainSeriesProperties.baselineStyle.bottomFillColor1":
      //   "rgba( 235, 77, 92, 0.1)",
      // "mainSeriesProperties.baselineStyle.bottomFillColor2":
      //   "rgba( 235, 77, 92, 0.1)",
      // "mainSeriesProperties.baselineStyle.topLineColor":
      //   "rgba( 83, 185, 135, 1)",
      // "mainSeriesProperties.baselineStyle.bottomLineColor":
      //   "rgba( 235, 77, 92, 1)",
      // "mainSeriesProperties.baselineStyle.topLineWidth": 1,
      // "mainSeriesProperties.baselineStyle.bottomLineWidth": 1,
      // "mainSeriesProperties.baselineStyle.priceSource": "close",
      // "mainSeriesProperties.baselineStyle.transparency": 50,
      // "mainSeriesProperties.baselineStyle.baseLevelPercentage": 50,

      // // Hi-Lo style
      // "mainSeriesProperties.hiloStyle.color": "#2962FF",
      // "mainSeriesProperties.hiloStyle.showBorders": true,
      // "mainSeriesProperties.hiloStyle.borderColor": "#2962FF",
      // "mainSeriesProperties.hiloStyle.showLabels": true,
      // "mainSeriesProperties.hiloStyle.labelColor": "#2962FF",
      // "mainSeriesProperties.hiloStyle.fontFamily": "Trebuchet MS",
      // "mainSeriesProperties.hiloStyle.fontSize": 7,
      // "indicator_name.input_name": "volume",
      // "mainSeriesProperties.extendedHours": false,

      // "paneProperties.leftAxisProperties.autoScale": true,
      // "paneProperties.leftAxisProperties.autoScaleDisabled": false,
      // "paneProperties.leftAxisProperties.percentage": false,
      // "paneProperties.leftAxisProperties.percentageDisabled": false,
      // "paneProperties.leftAxisProperties.log": false,
      // "paneProperties.leftAxisProperties.logDisabled": false,
      // "paneProperties.leftAxisProperties.alignLabels": true,

      // // 坐标轴和刻度标签
      // "scalesProperties.showLeftScale": false,
      // "scalesProperties.showRightScale": true,
      // "scalesProperties.backgroundColor": "#212121", //"#20334d",
      // "scalesProperties.lineColor": "#46587b",
      // "scalesProperties.scaleSeriesOnly": false,
      // "mainSeriesProperties.candleStyle.wickColor": "#737375",
      // "mainSeriesProperties.hollowCandleStyle.wickUpColor": "#3fcfb4",
      // "mainSeriesProperties.hollowCandleStyle.wickDownColor": "#fe4761",
      // "mainSeriesProperties.haStyle.wickUpColor": "#3fcfb4",
      // "mainSeriesProperties.haStyle.wickDownColor": "#fe4761",
      // "mainSeriesProperties.areaStyle.transparency": 80,
    },
    ...props.options,
    container_id: chartId,
  };
}
</script>

<template>
  <div
    class="CkLineChart"
    :style="{ height: props.height }"
    :id="chartId"
  ></div>
</template>

<style lang="scss" scoped>
.CkLineChart {
  width: 100%;
}
</style>
